<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import _ from 'lodash';
import { botCenterGet } from '@/services/bot';
import { settingGet } from '@/services/setting';
import { saveStorage, getStorage } from '@/utils';
import search from '@/assets/ai/search.svg';

const props = defineProps({
  sxList: {
    type: Array as any,
    default: () => [],
  },
});

const state = reactive({
  // 切换
  activeName: '1',
});

const emits = defineEmits(['change']);

onMounted(async () => {});

// 筛选切换
const tabClick = async () => {
  emits('change', state.activeName);
};
</script>

<template>
  <div class="tabsComponents">
    <el-tabs v-model="state.activeName" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane v-for="(item, key) in props.sxList" :key="key" :name="item.code">
        <template #label>
          <span :class="`custom-tabs-label ${state.activeName === item.code ? 'tab-checked' : ''}`">
            {{ item.name }}
          </span>
          <!-- <span class="tab-num">{{ item.num }}</span> -->
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss">
@use './index.scss';
</style>
